<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-Equiv="Expires" Content="0" />
    <title>应用监控</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css"/>
</head>
<style>
    .layui-col-md6 {
        padding: 5px;
    }

    .layui-card-header {
        color: #444 !important;
    }

    .title {
        padding: 1px 5px;
    }
</style>
<body style="background-color: #F2F2F2">
<div style="padding: 20px;margin-top: 50px;">
    <div class="layui-col-md12" style="margin-bottom: 15px">
        <div class="layui-card">
            <div class="layui-card-header">
               <i class="layui-icon" style="color: #009688">&#xe7ae;</i>
                <span><a href="/list" style="color: #009688">监控列表</a>/ 实时监控</span>
               <!--  <span style="float: right;">
                    <button id="pinlv" class="layui-btn layui-btn-xs">频率</button>
                </span> -->
            </div>
        </div>
    </div>

    <div class="layui-col-md12" style="margin-bottom: 10px">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge layui-bg-green title">Mysql监控</span>           
            </div>
        </div>
    </div>

    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge layui-bg-cyan">QPS</span>
            </div>
            <div class="layui-card-body" id="mysql_qps" style="height: 330px">
            </div>
        </div>
    </div>
    
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge layui-bg-cyan">TPS</span>
            </div>
            <div class="layui-card-body" id="mysql_tps" style="height: 330px">
            </div>
        </div>
    </div>
    
   <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge layui-bg-cyan">connections</span>
            </div>
            <div class="layui-card-body" id="mysql_conn" style="height: 330px">
            </div>
        </div>
    </div>
    
     <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge layui-bg-cyan">CRUD</span>
            </div>
            <div class="layui-card-body" id="mysql_crud" style="height: 330px">
            </div>
        </div>
    </div>

</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/sockjs.min.js"></script>
<script src="/lib/stomp.min.js"></script>
<script src="/lib/layui/layui.all.js"></script>
<script src="/lib/vue.min.js"></script>
<script src="/lib/echarts.min.js"></script>
<script src="/js/util.js?v=1"></script>

<script src="/js/socket_mysql.js?v=1"></script>


<script src="/js/mysql_conns.js"></script>
<script src="/js/mysql_qps.js"></script>
<script src="/js/mysql_crud.js"></script>
<script src="/js/mysql_tps.js"></script>

</body>
</html>